<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            background: rgba(0,0,0,.5);
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>
<body>
<!--
    5、获取当前网页的大小，创建一个div设置高度和宽度与网页一样大，添加到网页中，遮挡网页的内容，并且div是半透明的背景色。


    HTML： 宽度和高度   高度： clientHeight: 整个窗口的高度

    body : 高度： clientHeight: 内容区域的高度


        事件源： button

        事件类型：onclick

        事件处理函数： 创建一个div设置高度和宽度与网页一样大，添加到网页中，遮挡网页的内容，并且div是半透明的背景色
-->
    <button id="button">弹出蒙版</button>
    <script type="text/javascript">
        // 1，制作静态效果
        // 2，在事件源上绑定事件
        var button = document.getElementById("button");
        button.onclick = function () {
            //3,先获取窗口的宽度和高度
            var htmlObj = document.documentElement;
            var wid = htmlObj.clientWidth;
            var hei = htmlObj.clientHeight;

            //4,创建一个div，并设置宽高为窗口的宽度和高度
            var div = document.createElement("div");
            div.style.width = wid+"px";
            div.style.height = hei+"px";
            div.className = "a";

            //5,添加到网页
            document.body.appendChild(div);
        }


    </script>
</body>
</html>